<template>
	<view class="content">
		<view class="title">绑定手机号</view>
		<view class="value">为了方便进行提现，请输入您的常用手机号</view>
		<view class="phone">
			<input type="number" placeholder="请输入手机号" maxlength="11" v-model="phone" />
		</view>
		<view class="codeBtn" @tap="getCode">获取验证码</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			phone: ''
		};
	},

	mounted() {},

	methods: {
		getCode() {
			let phone = this.phone;
			if (!phone) {
				uni.showToast({
					title: '请填写手机号',
					icon: 'none'
				});
				return false;
			}
			if (!/^1[3456789]\d{9}$/.test(phone)) {
				uni.showToast({
					title: '手机号格式不对',
					icon: 'none'
				});
				return false;
			}
			this.$service.common.common
				.getCode({
					phone
				})
				.then(res => {
					uni.showToast({
						title: '发送成功',
						icon: 'none'
					});
					setTimeout(() => {
						this.$Router.push({
							path: '/pages/member/bindCode',
							query: {
								phone: phone
							}
						});
					}, 800);
				})
				.catch(err => {
					if (err.message.includes('触发')) {
						uni.showToast({
							title: '发送频繁，请稍后再试',
							icon: 'none'
						});
						return false;
					}
					uni.showToast({
						title: err.message,
						icon: 'none'
					});
				});
		}
	}
};
</script>
<style lang="scss" scoped>
.content {
	background: #ffffff;
	height: 100vh;
	overflow: hidden;
	.title {
		color: #221d2c;
		font-size: 44rpx;
		margin-top: 38rpx;
		margin-left: 50rpx;
	}
	.value {
		color: #86828c;
		font-size: 28rpx;
		margin-top: 16rpx;
		margin-left: 50rpx;
	}
	.phone {
		width: 644rpx;
		margin: auto;
		margin-top: 110rpx;
		border-bottom: 2rpx solid #c1c1c3;
		input {
			height: 44rpx;
			font-size: 32rpx;
			margin: 30rpx 0;
		}
	}
	.codeBtn {
		width: 640rpx;
		height: 80rpx;
		margin: auto;
		margin-top: 160rpx;
		background: #f70114;
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		color: #ffffff;
		font-size: 28rpx;
	}
}
</style>
